<template>
  <v-card class="pa-3 tab-group-item" v-bind="bindAddr">
    <div class="d-flex align-start" :data-testid="`group-tab-item-v-card-${datatestid}`">
      <div class="mr-3">
        <template v-if="kind === 'tab'">
          <v-progress-circular v-if="tab?.nav?.isLoading" indeterminate :size="26" :width="2" />
          <v-avatar v-else :icon="tab?.icon || mdiTab" :image="tab?.favicon" rounded size="26" />
        </template>
        <template v-else>
          <v-icon :icon="mdiTab" />
        </template>
      </div>
      <div class="flex-grow-1 overflow-hidden">
        <div class="text-truncate font-weight-medium">
          {{ title }}
        </div>
        <div class="text-caption text-medium-emphasis text-truncate">{{ url }}</div>
        <div class="mt-2 d-flex flex-wrap">
          <template v-if="kind === 'tab'">
            <v-btn
              color=""
              data-testid="group-tab-item-refresh-mdiRefresh"
              :loading="tab?.nav?.isLoading"
              :prepend-icon="mdiRefresh"
              size="small"
              title="刷新/重试加载"
              variant="plain"
              @click.stop="$emit('refresh')"
              >刷新</v-btn
            >
            <v-btn
              color=""
              data-testid="group-tab-item-close-mdiClose"
              :prepend-icon="mdiClose"
              size="small"
              title="关闭该标签"
              variant="plain"
              @click.stop="$emit('close')"
              >关闭</v-btn
            >
          </template>
          <template v-else>
            <v-btn
              data-testid="group-tab-item-open-mdiPlay"
              :prepend-icon="mdiPlay"
              size="small"
              title="打开该等待项"
              variant="text"
              @click="$emit('open')"
              >打开</v-btn
            >
            <v-btn
              data-testid="group-tab-item-remove-mdiClose"
              :prepend-icon="mdiClose"
              size="small"
              title="从等待队列移除"
              variant="text"
              @click="$emit('remove')"
              >移除</v-btn
            >
          </template>
        </div>
      </div>
    </div>
  </v-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { mdiClose, mdiPlay, mdiRefresh, mdiTab } from '@mdi/js'
import { useTabStore } from '@/windows/layoutBrowser/stores/tab'

const tabStore = useTabStore()

const props = defineProps<{
  kind: 'tab' | 'waiting'
  tab?: any
  waiting?: any
  datatestid?: any
}>()

const emit = defineEmits<{
  (e: 'activate'): void
  (e: 'refresh'): void
  (e: 'close'): void
  (e: 'open'): void
  (e: 'retry'): void
  (e: 'remove'): void
}>()

const bindAddr = computed(() => {
  const d: Record<string, any> = {
    rounded: 'lg',
    color: cardColor.value,
    elevation: props.kind === 'tab' ? 1 : 0,
    class: {
      'error-card': isError.value,
      'opacity-40': props.kind === 'waiting'
    }
  }
  if (props.kind === 'tab') {
    d.onClick = () => emit('activate')
  }

  return d
})

const title = computed(() => {
  return props.kind === 'tab'
    ? props.tab?.title || props.tab?.url
    : props.waiting?.title || props.waiting?.url
})
const url = computed(() => {
  return props.kind === 'tab' ? props.tab?.url : props.waiting?.url
})

const isError = computed(() => props.kind === 'tab' && !!props.tab?.state?.error)
const cardColor = computed(() =>
  tabStore.activeTabId === props.tab?.id ? 'tab-active' : 'surface'
)
</script>

<style scoped>
.error-card {
  border-left: 2px solid rgb(var(--v-theme-error));
  .text-truncate {
    color: rgb(var(--v-theme-error));
  }
}
</style>
